<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 100%;
        }
        .query{
            bottom: 40px;
            float: right;
        }
        .dbt-query{
           margin-right: 1px;
        }
        table,td,th{
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        .add{
           float: left;
        }
        td{
            text-align: center;
        }
        .page{
            float: right;
        }
        .normalTable tbody tr:nth-child(odd){
            background-color: aliceblue;
        }
        .normalTable tbody tr:hover{
            background-color:#f7fd82;
            cursor: pointer;
        }
        </style>
         <script>
        function insertUser(){
        //收集数据
        let rowData=[];
        rowData[0]=document.getElementById("insertUser_userName").value;
        rowData[1]=document.getElementById("insertUser_password").value;
        rowData[2]=true==document.getElementById("insertUser_sex_man").checked?"男":"女";
        //插入数据
        let tbody=document.getElementById("myTbody");
        let row=tbody.insertRow(tbody.rows.length);
        row.setAttribute("data-row-id",tbody.rows.length);
        let cell0=row.insertCell(0);
        let input=document.createElement("input");
        input.type="checkbox";
        input.name="trCheck";
        input.value=tbody.rows.length;
        cell0.appendChild(input);
        let count=1;
        rowData.forEach((item)=>{
            let cell=row.insertCell(count);
            cell.innerHTML=item;
            count++
        });
        document.getElementById("insertUser").hidden=true;
        document.getElementById("userTable").hidden=false;   
    }
             //定位
         function deleteUser(){
             let arrays=document.getElementsByName("trCheck");
             let params="";
             [...arrays].filter((item)=>item.checked==true).forEach((item)=>{
                 if(params==""){
                     params+=item.value;
                 }else{
                     params+=",";
                     params+=item.value;
                 }
             });
             let newArrays=params.split(",");
             console.log("1"+newArrays);
             newArrays.forEach((item)=>{
                 console.log("2"+item);
                 let currentIndex=document.querySelector(`[data-row-id='${item}']`).rowIndex;
                 document.getElementById("myTbody").deleteRow(currentIndex-1);
             });  
         }  
            function init(){
                document.getElementById("insertUser_sumbit").addEventListener("click",insertUser,false);
                document.getElementById("userTable_btnInsertUsers").addEventListener("click",deleteUser,false);
                //单击行的任务位置都选中该行第一列的复选框
                document.querySelectorAll(".normalTable tbody")[0].addEventListener("click",(event)=>{
                    if(event.target.nodeName!="INPUT"){
                        let node=event.target.parentNode.firstElementChild.firstElementChild;
                        console.log(event.target)
                        if(node.checked==true){
                            node.checked=false;
                        }else{
                            node.checked=true;
                        }
                    }
        
                },false);
                //复选框全选功能
                document.getElementById("allCheck").addEventListener("change",()=>{
                    let flag=document.getElementById("allCheck").checked;
                    let arrays=document.getElementsByName("trCheck");
                    arrays.forEach((item)=>{
                        item.checked=flag;
                    });
                },false);
                document.getElementById("insertUser_btnReturn").addEventListener("click",()=>{
                    document.getElementById("insertUser").hidden=true;
                    document.getElementById("userTable").hidden=false;            
                },false);
                document.getElementById("userTable_btnInsertUser").addEventListener("click",()=>{
                    document.getElementById("insertUser").hidden=false;
                    document.getElementById("userTable").hidden=true;
                },false);
                document.getElementById("myTbody").addEventListener("dblclick",(event)=>{
                    let currentNode=event.target;   //获取被双击格子
                    let input=document.createElement("input");  //创建一个文本框
                    input.type="text";
                    input.value=currentNode.innerHTML;
                    input.size=input.value.length;
                    //设定文本框丢失焦点时消失，并同时将文本框中的数据添入td。
                    input.addEventListener("blur",(event)=>{
                        let pn=event.target.parentNode;
                        pn.innerHTML=event.target.value;
                    },false);
                    currentNode.innerHTML="";
                    currentNode.appendChild(input);     //将文本框作为currentNode元素的子元素追加 
                    input.focus();      //解决没法获取焦点bug.
                },false);
            }
            window.addEventListener("load",init,false);
            </script>
</head>
<body>
                        <section id="insertUser" hidden>
                                <table class="noBorderTable">
                                    <tbody>
                                        <tr>
                                            <td><label for="userName">用户名：</label></td>
                                            <td><input type="text" name="userName" id="insertUser_userName"></td>
                                        </tr>
                                        <tr>
                                            <td><label for="userName">密码：</label></td>
                                            <td><input type="password" name="password" id="insertUser_password"></td>
                                        </tr>
                                        <tr>
                                                <td>性别：</td>
                                                <td>
                                                    <input type="radio" name="sex" id="insertUser_sex_man" value="1" checked>男&nbsp;
                                                    <input type="radio" name="sex" id="insertUser_sex_woman" value="2">女&nbsp;
                                                </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <button id="insertUser_btnReturn">返回</button>
                                                <button  id="insertUser_sumbit">提交</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                        </section>
                    <section id="userTable">
                        <nav class="query">
                    <input type="search" name="keyword"><button class="dbt-query">查询</button></style>
                 </nav></td></tr> 
                 <table class="normalTable">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="allCheck"></th>
                                <th>用户名</th>
                                <th>密码</th>
                                <th>性别</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                    <tr><td colspan ="4">
                                            <nav class="add">
                                            <button id="userTable_btnInsertUser">新增</button>
                                            <button id="userTable_btnInsertUsers">删除</button>
                                            <button>修改</button>
                                        </nav>
                                        <nav class="page">
                                            首页&nbsp;上一页&nbsp;
                                            <select></select>&nbsp;下一页&nbsp;尾页
                                        </nav>                           
                                </td>
                            </tr>
                        </tfoot>
                        <tbody id="myTbody">
                        
                                <tr data-row-id="1">
                                <td><input type="checkbox" name="trCheck" value="1"></td>
                                <td>旭凤</td>
                                <td>123456</td>
                                <td>男</td>
                            </tr>
                            <tr data-row-id="2">
    
                                <td><input type="checkbox" name="trCheck" value="2"></td>
                                <td>润玉</td>
                                <td>654321</td>
                                <td>男</td>
                            </tr>
                            <tr data-row-id="3">
           
                                <td><input type="checkbox" name="trCheck" value="3"></td>
                                <td>锦蜜</td>
                                <td>234567</td>
                                <td>女</td>
                            </tr>
                        </tbody>
                    </table>
                </section>
            </body>
</html>